<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>班级相册</title>
    <link href="css/album.css" rel="stylesheet" type="text/css" />
    <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="js/http   code.jquery.com jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/NFLightBox.js"></script>
    <script>
	    $(document).ready(function() {
			$('.img_1').css('opacity', 0.5).hover(function () {
					$(this).stop().fadeTo(300, 1);
					/*$('.explain_1').stop().fadeTo(300,1);*/
				}, function () {
					$(this).stop().fadeTo(300, 0.5);
					/*$('.explain_1').stop().fadeTo(300,0);*/
			});
			$('.img_2').css('opacity', 0.5).hover(function () {
					$(this).stop().fadeTo(300, 1);
					/*$('.explain_2').stop().fadeTo(300,1);*/
				}, function () {
					$(this).stop().fadeTo(300, 0.5);
					/*$('.explain_2').stop().fadeTo(300,0);*/
			});
			$('.img_3').css('opacity', 0.5).hover(function () {
					$(this).stop().fadeTo(300, 1);
					/*$('.explain_3').stop().fadeTo(300,1);*/
				}, function () {
					$(this).stop().fadeTo(300, 0.5);
					/*$('.explain_3').stop().fadeTo(300,0);*/
			});
			$('.img_4').css('opacity', 0.5).hover(function () {
					$(this).stop().fadeTo(300, 1);
					/*$('.explain_4').stop().fadeTo(300,1);*/
				}, function () {
					$(this).stop().fadeTo(300, 0.5);
					/*$('.explain_4').stop().fadeTo(300,0);*/
			});
			$(function(){var settings={containerResizeSpeed: 350};
			$('.gallery_1 a').lightBox(settings);
			$('.gallery_1 a').lightBox({
				overlayBgcolor:"#666",
				overlayOpacity:0.5,
				containerResizeSpeed:600
			})
			$('.gallery_4 a').lightBox(settings);
			$('.gallery_4 a').lightBox({
				overlayBgcolor:"#666",
				overlayOpacity:0.5,
				containerResizeSpeed:600
			})
			$('.gallery_2 a').lightBox(settings);
			$('.gallery_2 a').lightBox({
				overlayBgcolor:"#666",
				overlayOpacity:0.5,
				containerResizeSpeed:600
			})
			$('.gallery_3 a').lightBox(settings);
			$('.gallery_3 a').lightBox({
				overlayBgcolor:"#666",
				overlayOpacity:0.5,
				containerResizeSpeed:600
				})
			})
		});
	</script>
    <script type="text/javascript">
            $(function() {
                var d=300;
                $('#our_label a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#our_label > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-30px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>
</head>
<body>
	<div class="content">
        <ul id="our_label">
            <li class="about_us"><a href="#" class="about_us"></a></li>
            <li class="contact_us"><a href="#" class="contact_us"></a></li>
        </ul>
        <div class="display">
            <a href="#"><div class="more" title="点击更多">More<label>>></label></div></a>
            <div class="gallery_1">
                <a href="images/bphoto_1.jpg"><div class="img_1" title="点击更多"><img src="images/photo_1.gif" /></div></a>
                <a href="images/bphoto_2.jpg"></a>
                <a href="images/bphoto_3.jpg"></a>
            </div>
            <div class="gallery_2">
                <a href="images/bphoto_2.jpg"><div class="img_2"  title="点击更多"><img src="images/photo_2.gif" /></div></a>
                <a href="images/bphoto_3.jpg"></a>
                <a href="images/bphoto_4.jpg"></a>
            </div>
            <div class="gallery_3">
                <a href="images/bphoto_3.jpg"><div class="img_3" title="点击更多"><img src="images/photo_3.gif" /></div></a>
                <a href="images/bphoto_4.jpg"></a>
                <a href="images/bphoto_1.jpg"></a>
            </div>
            <div class="gallery_4">
            	<a href="images/bphoto_4.jpg"><div class="img_4" title="点击更多"><img src="images/photo_4.gif" /></div></a>
                <a href="images/bphoto_1.jpg"></a>
                <a href="images/bphoto_2.jpg"></a>
            </div>
            <div class="explain_1">
            	<h2>我们的军旅生活</h2>
                <p>一群可爱的教官，一帮调皮的孩子，一阵烈日的暴晒，一段五味的回忆。看看我们当初是怎样调皮的，再回味一下……</p>
            </div>
            <div class="explain_2">
            	<h2>那年秋天。。。</h2>
                <p>森林公园，我们一起happy，烧烤似乎并不是那么美味，但是大家的笑容说明了“美味”不重要，重要的是我们之间的友情。</p>
            </div>
            <div class="explain_3">
            	<h2>大学四处游</h2>
                <p>从高三的压抑中逃离出来，大学可以说是天堂。吃了吃喝玩乐、打鼾睡觉，貌似旅游也是大学生活中不可缺少的一部分。</p>
            </div>
            <div class="explain_4">
            	<h2>美女帅哥晒照片</h2>
                <p>封面的那个人在沉思？？？你错了，那叫做摆酷、装帅，如此这般之人太多太多，不信你点开看看，让你知道什么叫做大学生。</p>
            </div>
        </div>
        <!--代码移植-->
        <div class="nav">
        	<a href="link.html" class="img_id_1" onmouseover="link.style.display = 'block'" onmouseout="link.style.display = 'none'"></a>
            <a href="#" class="img_id_2"></a>
            <a href="bulletin.html" class="img_id_3" onmouseover="bulletin.style.display = 'block'" onmouseout="bulletin.style.display = 'none'"></a>
            <a href="bbs.html" class="img_id_4" onmouseover="bbs.style.display = 'block'" onmouseout="bbs.style.display = 'none'"></a>
            <a href="contact.html" target="_blank" class="img_id_5" onmouseover="contact.style.display = 'block'" onmouseout="contact.style.display = 'none'"></a>
            <a href="index.html" class="img_home" onmouseover="home.style.display = 'block'" onmouseout="home.style.display = 'none'"></a>
        </div>
		<div class="nav_name">
        	<ul>
            	<li><img src="images/nav_link.png"  id="link" /></li>
                <li><img src="images/nav_album.png" style="display:block" /></li>
                <li><img src="images/nav_bulletin.png" id="bulletin"/></li>
                <li><img src="images/nav_bbs.png" id="bbs"/></li>
                <li><img src="images/nav_contact.png" id="contact"/></li>
                <li><img src="images/nav_home.png" id="home"/></li>
            </ul>
        </div><!--nav、nav-name和nav-bg组成一个导航栏-->
    </div>
</body>
</html>
